<template>
  <div>
    <el-dialog
      :title="$props.title"
      v-el-drag-dialog
      :visible.sync="show"
      :modal="false"
      :close-on-click-modal="false"
    >
      <el-table
        :data="data"
        @row-click="handleRowClick"
        style="width: 100%"
        height="250"
      >
        <el-table-column
          property="name"
          label="名字"
          width="150"
        ></el-table-column>
        <el-table-column
          property="arearain"
          label="面雨量"
          width="200"
        ></el-table-column>
        <el-table-column
          property="criticalPrecipitation"
          label="阈值"
        ></el-table-column>
        <el-table-column
          property="status_difference"
          label="超阈值"
        ></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { Vector } from "ol/layer";
import { Vector as VectorSource } from "ol/source";
import {createHighLayer} from '../utils'
import elDragDialog from "@/views/surfaceRainfallForecast/compoents/el-drag-dialog";
export default {
  props: ["title", "dialogTableVisible", "currentData"],
  name: "DialogList",
  directives: {
    elDragDialog,
  },
  data() {
    return {
      //高亮的图层
      statusDifferenceHighLayer: null,
    };
  },
  computed: {
    show: {
      get() {
        return this.$props.dialogTableVisible;
      },
      set(val) {
        this.$emit("closedDiglog");
      },
    },
    data() {
      if (!this.$props.currentData) {
        return {};
      }
      return this.$props.currentData;
    },
  },
  mounted() {
    this.statusDifferenceHighLayer = new Vector({
      source: new VectorSource({}),
      name: "surface-rainfall-forecast-status-difference-highLayer",
      zIndex: 100,
    });
    this.$store.getters.Map.map.addLayer(this.statusDifferenceHighLayer);
  },
  methods: {
    handleRowClick(row) {
      this.statusDifferenceHighLayer.getSource().clear();
      createHighLayer(this.statusDifferenceHighLayer, row);
      //跳转过去
      this.$store.getters.Map.view.animate({
        center: [parseFloat(row.longitude), parseFloat(row.latitude)],
        duration: 1000,
      });
    },
  },
  beforeDestroy() {
    this.$store.getters.Map.map.removeLayer(this.statusDifferenceHighLayer);
  },
};
</script>

<style scoped></style>
